<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<title>Insert title here</title>
<script type="text/javascript" src="../static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=1.4.13&key=18ccbb78eb8927cc467798ca349608c2"></script>


<style type="text/css">
#container {
	position: absolute;
	width: 98%;
	height: 98%;
	bottom: 0px width:99%;
/* 	height: 400px; */
}

.div {
	width: 100%;
	height: 100%;
}
        .marker {
            position: absolute;
            top: -20px;
            right: -118px;
            color: #fff;
            padding: 4px 10px;
            box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #25A5F7;
            border-radius: 3px;
        }

.amap-icon img{
	    width: 25px !important;
    height: 30px !important;
}

</style>
</head>
<body>
	<div>

		<div id="container"></div>

	</div>

</body>
<script type="text/javascript" src="../static/js/back/utils.js"></script>
<script type="text/javascript">
var map;
var marker;
var markers=[];

	$(function() {
		showMap();
		
	})
	
	
	function showMap(){
		var __postion__ = getCurrentPostionByIp();
		console.log(__postion__);
		var loc = __postion__.rectangle;
		var latlng = getLocationByAddress(__postion__.city);
		console.log(latlng);
		var ll = latlng.location.split(',');;
		map = new AMap.Map('container', {
			zoom : 10,//级别
			center : ll,//中心点坐标
			viewMode : '3D'//使用3D视图
		});
		
		addMarker(ll);
		map.on('click', showInfoClick);
	}
	 // 实例化点标记
    function addMarker(latlng) {
    	
        marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: latlng,
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        markers.push(marker);
    }
	 
    function showInfoClick(e){
    	map.remove(markers);
        addMarker([e.lnglat.getLng(),e.lnglat.getLat()]);
        parent.setLoact(e.lnglat.getLng()+','+e.lnglat.getLat());
    }
	
	
</script>
</html>